<template>
  <div class="bg-box">
    <div class="title">2.{{ plugin.t('config.two.title') }}</div>
    <t-alert theme="info" :message="plugin.t('config.two.body')" style="margin-bottom: 20px">
      <template #close>
        <t-button :loading="loading" theme="primary" @click.stop="onSubmit">
          {{ plugin.t('signer.add') }}
        </t-button>
      </template>
    </t-alert>
    <t-table
      row-key="id"
      table-layout="auto"
      :data="data"
      :loading="signerLoading"
      :columns="[{
        title: plugin.t('signer.id'),
        colKey: 'id'
      }, {
        title: plugin.t('signer.state'),
        colKey: 'state',
        cell: 'state',
        align: 'right'
      }]"
    >
      <template #state="{ row }">
        <t-tag :theme="row.state == 'DISABLED' ? 'warning' : 'success'" variant="light">{{ plugin.t('signer.state_text.' + row.state) }}</t-tag>
      </template>
    </t-table>
  </div>
</template>
<script setup>
  import { ref } from 'vue'
  import app from '@/app'
  import index from '../../index'
  import fiskalyStore from '../../store'

  const plugin = index.plugin
  const data = fiskalyStore.signer
  const signerLoading = fiskalyStore.signerLoading
  const loading = ref(false)

  // 更新配置
  const onSubmit = () => {
    loading.value = true
    fiskalyStore.addSigner().then(res => {
      app.message('success', 'message.create')
    }).catch(err => {
      app.message('warning', index.plugin.message('signer.message.' + err.message))
    }).finally(() => {
      loading.value = false
    })
  }
</script>